document.addEventListener('DOMContentLoaded', function () {
    const addBtn = document.getElementById('add-todo');
    const clearBtn = document.getElementById('clear-todos');
    const input = document.getElementById('todo-input');
    const list = document.getElementById('todo-list');

    addBtn.addEventListener('click', function () {
        const text = input.value.trim();
        if (text) {
            addTodoItem(text);
            input.value = '';
        }
    });

    clearBtn.addEventListener('click', function () {
        list.innerHTML = ''; // 清除所有待办事项
    });

    function addTodoItem(text) {
        const item = document.createElement('li');
        item.className = 'todo-item';
        item.innerHTML = `
            <span>${text}</span>
            <button class="delete-btn">Delete</button>
        `;
        item.addEventListener('click', function () {
            item.classList.toggle('completed');
        });
        list.appendChild(item);

        // Adding a slight delay for each item's animation for a more distinct effect
        const delay = list.children.length * 100;
        setTimeout(function () {
            item.style.opacity = 1;
            item.style.transform = 'translateY(0)';
        }, delay);
    }

    const deleteButtons = document.querySelectorAll('.delete-btn');
    deleteButtons.forEach(function (btn) {
        btn.addEventListener('click', function () {
            btn.closest('.todo-item').remove();
        });
    });
});